@import 'assets/scss/index.scss';
.media-nav {
  position: relative;
  z-index: 210;
  border-top: .02rem solid;
  // transition: all .2s;
  @include border-line();
  .live-nav{
    width: 100%;
    transition: all .2s;
    &.fix {
      @include background-main();
    }
  }
  .first-tabs{
    height: .88rem;
    display: flex;
    position: relative;
    span {
      font-size: .32rem;
      transition: all .3s;
      flex: none;
      padding: 0 .3rem;
      @include font-main();
      display: flex;
      flex-direction: column;
      justify-content: center;
      &.active{
        transform: scale(1.25);
        font-weight: 600;
        &::before{
          content: "一";
          line-height: 1;
          position: absolute;
          bottom: -.06rem;
          left: 50%;
          transform: translateX(-50%);
          transition: all .25s;
        }
      }
      &.update{
        position: relative;
        &::after{
          content: "";
          width: .1rem;
          height: .1rem;
          border-radius:50%;
          position: absolute;
          top: .2rem;
          right: .1rem;
          background-color: red;
        }
      }
    }
  }

  .second-tabs{
    height: .76rem;
    padding: 0.2rem .12rem .16rem .12rem;
    justify-content: flex-end;
    position: relative;
    .second-tabs--wrap {
      margin: 0 0 0 .76rem;
      height: 100%;
      overflow-x:auto;
      -webkit-overflow-scrolling: touch;
      span {
        cursor: pointer;
        font-size: .28rem;
        transition: all .3s;
        flex: none;
        padding: 0 .24rem;
        @include font-sub();
        line-height: 1.3;
        &.active{
          @include font-tip();
        }
      }
      &.interaction {
        border: none;
        position: absolute;
        left: .06rem;
        top: 0rem;
      }
    }
    .open-button {
      width: .76rem;
      height: 100%;
      font-size: .36rem;
      margin: 0 .06rem 0 0;
      position: absolute;
      left: 0;
      top: 0;
      @include font-main();
      .iconfont {
        transition: all .2s;
        font-size: .32rem;
        &.close {
          transform: rotateZ(-180deg);
        }
      }
      &:after {
        content: '';
        height: .34rem;
        border-right: .02rem solid;
        @include border-line();
        position: absolute;
        right: 0;
        top: .22rem;
      }
    }
  }
  .open-nav {
    @include background-main();
    width: 100%;
    padding: 0 0 .2rem 0;
    position: absolute;
    left: 0;
    top: 1.62rem;
    font-size: .28rem;
    transition: height .2s;
    display: flex;
    flex-wrap:wrap;
    &.open {
      height: auto;
    }
    ul {
      margin: .4rem .1rem .2rem;
    }
    .open-item {
      border-style: solid;
      border-width: .02rem;
      // @include border-main();
      @include font-main();
      padding: .04rem .3rem;
      margin: .16rem .12rem .08rem .08rem;
      border-radius: .26rem;
      &.active {
        @include font-tip();
        @include border-main();
        font-weight: 700;
      }
    }
  }
}
.media-nav--business {
  position: relative;
  z-index: 210;
  @include background-card();
  .live-nav {
    width: 100%;
    &.fix {
      @include background-card();
    }
  }
  .first-tabs{
    height: .88rem;
    display: flex;
    position: relative;
    span {
      font-size: .32rem;
      transition: all .3s;
      flex: none;
      padding: 0 .3rem;
      @include font-main();
      display: flex;
      flex-direction: column;
      justify-content: center;
      &.active{
        transform: scale(1.25);
        font-weight: 600;
        &::before{
          content: "一";
          line-height: 1;
          position: absolute;
          bottom: -.06rem;
          left: 50%;
          transform: translateX(-50%);
          transition: all .25s;
        }
      }
      &.update{
        position: relative;
        &::after{
          content: "";
          width: .1rem;
          height: .1rem;
          border-radius:50%;
          position: absolute;
          top: .2rem;
          right: .1rem;
          background-color: red;
        }
      }
    }
  }

  .second-tabs{
    height: .76rem;
    padding: 0.2rem .12rem .16rem .12rem;
    justify-content: flex-end;
    position: relative;
    .second-tabs--wrap {
      margin: 0 0 0 .76rem;
      height: 100%;
      overflow-x:auto;
      -webkit-overflow-scrolling: touch;
      span {
        cursor: pointer;
        font-size: .28rem;
        transition: all .3s;
        flex: none;
        padding: 0 .24rem;
        @include font-sub();
        line-height: 1.3;
        &.active{
          @include font-tip();
        }
      }
      &.interaction {
        border: none;
        position: absolute;
        left: .04rem;
        top: 0rem;
      }
    }
    .open-button {
      width: .76rem;
      height: 100%;
      font-size: .36rem;
      margin: 0 .06rem 0 0;
      position: absolute;
      left: 0;
      top: 0;
      @include font-main();
      .iconfont {
        transition: all .2s;
        font-size: .32rem;
        &.close {
          transform: rotateZ(-180deg);
        }
      }
      &:after {
        content: '';
        height: .34rem;
        border-right: .02rem solid;
        @include border-line();
        position: absolute;
        right: 0;
        top: .22rem;
      }
    }
  }
  .open-nav {
    @include background-main();
    width: 100%;
    padding: 0 0 .2rem 0;
    position: absolute;
    left: 0;
    top: 1.62rem;
    // z-index: 115;
    font-size: .28rem;
    transition: height .2s;
    display: flex;
    flex-wrap:wrap;
    &.open {
      height: auto;
    }
    ul {
      margin: .4rem .1rem .2rem;
    }
    .open-item {
      border-style: solid;
      border-width: .02rem;
      // @include border-main();
      @include font-main();
      padding: .04rem .3rem;
      margin: .16rem .12rem .08rem .08rem;
      border-radius: .26rem;
      &.active {
        @include font-tip();
        @include border-main();
        font-weight: 700;
      }
    }
  }
}
.media-nav--business--pushionly {
  position: relative;
  z-index: 210;
  .live-nav{
    width: 100%;
  }
  .first-tabs{
    height: .88rem;
    display: flex;
    @include background-theme();
    position: relative;
    span {
      font-size: .32rem;
      transition: all .3s;
      padding: 0 .32rem;
      @include font-main();
      position: relative;
      &.active{
        transform: scale(1.25);
        font-weight: 600;
        &:after {
          transform: translateX(-.1rem) rotate(35deg) scale(.8) !important;
        }
      }
      &.update{
        position: relative;
        &::after{
          content: "";
          width: .1rem;
          height: .1rem;
          border-radius:50%;
          position: absolute;
          top: .2rem;
          right: .1rem;
          background-color: red;
        }
      }
      &:not(:last-child)::after {
        position: absolute;
        right: 0rem;
        top: 0.28rem;
        content: '';
        width: 0;
        height: 0.34rem;
        border-right: 2px solid #fff;
        transform: rotate(35deg);
        border-radius: 50%;
      }
    }
  }

  .second-tabs{
    height: .76rem;
    padding: 0 .12rem 0 0;
    position: relative;
    @include background-card();
    justify-content: flex-end;
    .second-tabs--wrap {
      margin: 0 0 0 .76rem;
      height: 100%;
      overflow-x:auto;
      -webkit-overflow-scrolling: touch;
      span {
        cursor: pointer;
        font-size: .28rem;
        transition: all .3s;
        padding: 0 .24rem;
        @include font-sub();
        position: relative;
        &.active{
          @include font-main();
          font-weight: 700;
          &::before{
            content: '';
            width: .4rem;
            height: .06rem;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            transition: all .25s;
            @include background-gradient();
          }
        }
      }
      &.interaction {
        border: none;
        position: absolute;
        left: .06rem;
        top: 0rem;
      }
    }
    .open-button {
      width: .76rem;
      height: 100%;
      font-size: .36rem;
      transition: all .2s;
      position: absolute;
      left: 0;
      top: 0;
      margin: 0 .06rem 0 0;
      @include font-main();
      box-shadow:5px 0 10px -7px #000;
      .iconfont {
        font-size: .32rem;
        &.close {
          transform: rotateZ(-180deg);
        }
      }
    }
  }
  .open-nav {
    @include background-main();
    width: 100%;
    padding: 0 0 .2rem 0;
    position: absolute;
    left: 0;
    top: 1.62rem;
    // z-index: 115;
    font-size: .28rem;
    transition: height .2s;
    display: flex;
    flex-wrap:wrap;
    &.open {
      height: auto;
    }
    ul {
      margin: .4rem .1rem .2rem;
    }
    .open-item {
      border-style: solid;
      border-width: .02rem;
      // @include border-main();
      @include font-main();
      padding: .04rem .3rem;
      margin: .16rem .12rem .08rem .08rem;
      border-radius: .26rem;
      &.active {
        @include font-tip();
        @include border-main();
        font-weight: 700;
      }
    }
  }
}
